<template>
  <div>
    <el-page-header @back="goBack" content="知识点详情">
    </el-page-header>

    <el-divider></el-divider>

    <div>
      <el-descriptions :title="this.ruleForm.knowledge">
        <el-descriptions-item label="发表人" span="1">{{ this.ruleForm.nickname }}</el-descriptions-item>
        <el-descriptions-item label="发表时间" span="2">{{ this.ruleForm.createDate }}</el-descriptions-item>
        <el-descriptions-item label="所属项目" span="1">{{ this.ruleForm.proName }}</el-descriptions-item>
        <el-descriptions-item label="知识类型" span="2">{{ this.ruleForm.knowType }}</el-descriptions-item>
        <el-descriptions-item label="知识点描述" span="3">{{ this.ruleForm.knowDes }}</el-descriptions-item>
        <el-descriptions-item v-if="ruleForm.knowUrl != null" label="关联图片" span="3">
          <el-image :src="this.ruleForm.knowUrl">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-divider><span>评论</span></el-divider>

    <el-input
        type="text"
        placeholder="请输入内容"
        v-model="text"
        maxlength="20"
        show-word-limit
        style="width: 85%; margin-left: 1%"
    >
    </el-input>
    <el-button type="primary" @click="addKnowDis" style="width: 10%; margin-left: 3%">发表评论</el-button>
    <div>
      <el-table
          :data="knowDis"
          style="width: 100%">
        <el-table-column
            prop="nickname"
            width="100">
        </el-table-column>
        <el-table-column
            prop="discuss">
        </el-table-column>
        <el-table-column
            prop="createDate"
            width="180">
        </el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="openDeleteConfirm(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          align="center"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="limits"
          layout="prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      count: 0,
      currentPage: 1,
      limits: 10,
      ruleForm: {},
      knowDis: [],
      text: '',
      dis: {
        knowId: '',
        discuss: ''
      }
    };
  },
  methods: {
    goBack() {
      this.$router.push({path: '/knows'})
    },
    /* 查询知识点评论总数 */
    countKnowDis(id) {
      console.log('countKnowDis');
      let url = 'http://localhost:8989/knowsDis/' + id + '/countKnowDis';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.count = responseBody.data;
        console.log(this.count);
      })
    },
    /* 分页 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.loadKnowDis(this.id);
    },
    addKnowDis() {
      console.log("addKnowDis");
      let url = 'http://localhost:8989/knowsDis/insert';
      console.log('url = ' + url);
      this.dis.knowId = this.ruleForm.id;
      this.dis.discuss = this.text;
      let formData = this.qs.stringify(this.dis, {arrayFormat: 'repeat'});
      console.log('formData = ' + formData);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        console.log('responseBody = ');
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$message({
            message: '发表成功！',
            type: 'success',
          });
          this.loadKnowDis(this.id);
        } else {
          this.$message.error(responseBody.message);
        }
      })
    },
    /* 删除 */
    handleDelete(knowDis) {
      let url = 'http://localhost:8989/knowsDis/' + knowDis.id + '/delete';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.$message({
            message: '删除成功！',
            type: 'success',
          });
          this.loadKnowDis(this.id);
        }
      })
    },
    openDeleteConfirm(knowDis) {
      const message = '此操作将删除这条评论，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:8989/knowsDis/' + knowDis.userId + '/term';
        console.log('url = ' + url);
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url).then((response) => {
          let responseBody = response.data;
          console.log(responseBody);
          if (responseBody.state != 20000) {
            this.$message.error(responseBody.message);
          } else {
            this.handleDelete(knowDis);
          }
        })
      }).catch(() => {
      });
    },
    loadKnowDis(id) {
      console.log('loadKnowDis');
      let page = this.currentPage - 1;
      let url = 'http://localhost:8989/knowsDis/' + id + '/' + page + '/' + this.limits + '/list';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.knowDis = responseBody.data;
      })
    },
    loadKnow(id) {
      console.log('loadKnow');
      let url = 'http://localhost:8989/knows/' + id + '/know';
      console.log('url = ' + url);
      this.listLoading = true;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.ruleForm = responseBody.data;
        this.listLoading = false;
      })
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.loadKnow(this.id);
    this.loadKnowDis(this.id);
    this.countKnowDis(this.id);
  }
}
</script>